﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>下拉菜单</title>
    <meta charset="utf-8" />
    <link href="../../assets/css/style.css" rel="stylesheet" />
</head>
<body>
    <div class="page-wraper">
        <h3 class="page-title">下拉菜单（下拉面板）</h3>
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li>
                    <i class="fa fa-home"></i>
                    <a href="index.html">页面组件</a>
                    <i class="fa fa-angle-right"></i>
                </li>
                <li>
                    <a href="#">下拉菜单</a>
                </li>
            </ul>
        </div>

        <div class="btn-group">
            <input type="button" class="btn" value="添加" />
            <input type="button" class="btn" value="删除" />
            <div class="mui-dropdown btn">
                <button type="button" class="dropdown-toggle">过滤<i class="fa fa-angle-down"></i></button>
                <ul class="dropdown-menu dropdown-right">
                    <li><a href="#">下拉菜单一</a></li>
                    <li><a href="#">下拉菜单一</a></li>
                    <li><a href="#">下拉菜单一</a></li>
                    <li><a href="#">下拉菜单一</a></li>
                </ul>
            </div>
        </div>

        <div class="mui-dropdown">
            <a href="#" class="dropdown-toggle">点击弹出下拉</a>
            <div class="dropdown-menu">
                div面板
            </div>
        </div>

        <div class="mui-dropdown btn block">
            <a href="#" class="dropdown-toggle">点击弹出下拉</a>
            <div class="dropdown-menu dropdown-right">
                div面板
            </div>
        </div>

        <div class="mui-dropdown btn btn-default block" data-event="hover">
            <a href="#" class="dropdown-toggle">鼠标悬停展开下拉面板</a>
            <ul class="dropdown-menu dropdown-right">
                <li>UL列表</li>
                <li>UL列表</li>
                <li>UL列表</li>
            </ul>
        </div>

        <div class="page-header"><h3>弹出框使用代码</h3></div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">弹出框使用说明代码</h3>
            </div>
            <div class="panel-body">
                <pre>
<code data-language="html">
//下拉的基本HTML结构如下
<div class="mui-dropdown">
     <a href="#" class="dropdown-toggle">下拉</a>
     <div class="dropdown-menu">
        这里是下拉显示的面板
    </div>
</div>
这里需要特别注意的是class="mui-dropdown"、class="dropdown-toggle"、class="dropdown-menu" 这三个类
jQuery 下拉插件是根据类名mui-dropdown来调用的
下拉有两种事件，一种是点击展开下拉面板，一种是鼠标悬停展开下拉面板
默认是点击才展开下拉面板，通过为类名为mui-dropdown的标签添加data-event="hover"属性
展开下拉的方式就会变为悬停显示

常见的使用方式有如下几种：
1、下拉菜单
<div class="mui-dropdown btn">
    <button type="button" class="dropdown-toggle">过滤<i class="fa fa-angle-down"></i></button>
    <ul class="dropdown-menu dropdown-right">
        <li><a href="#">下拉菜单一</a></li>
        <li><a href="#">下拉菜单一</a></li>
        <li><a href="#">下拉菜单一</a></li>
        <li><a href="#">下拉菜单一</a></li>
     </ul>
</div>

2、按钮组下拉操作选项
<div class="btn-group">
    <input type="button" class="btn" value="添加" />
    <input type="button" class="btn" value="删除" />
    <div class="mui-dropdown btn">
        <button type="button" class="dropdown-toggle">过滤<i class="fa fa-angle-down"></i></button>
        <ul class="dropdown-menu dropdown-right">
            <li><a href="#">下拉菜单一</a></li>
            <li><a href="#">下拉菜单一</a></li>
            <li><a href="#">下拉菜单一</a></li>
            <li><a href="#">下拉菜单一</a></li>
        </ul>
    </div>
</div>

3、下拉一个DIV面板
<div class="mui-dropdown">
    <a href="#" class="dropdown-toggle">点击弹出下拉</a>
    <div class="dropdown-menu">
        div面板
    </div>
</div>
</code>
</pre>
            </div>
        </div>

    </div>
    <div class="returnback" id="returnTop">
        <a href="javascript:void(0);">
            <i class="fa fa-arrow-up"></i>
        </a>
    </div>
    <script src="../../assets/js/plugins/jquery.1.8.3.js"></script>
    <script src="../../assets/js/plugins/jquery.mui.js"></script>
    <script src="../../assets/js/plugins/rainbow-custom.min.js"></script>
</body>
</html>
